<template>
  <el-card  class="scroll-item" v-scroll-reveal.reset shadow="always">
        <div slot="header" class="d-flex align-items-center">
           <i :class="'iconfont icon-'+icon"></i>
            <span>{{cardHeader}}</span>
        </div>
        <div class="text item">
            <el-link :underline="false" v-for="(item, index) in articles" @click="view(item.id)" :style="itemStyle" :key="index"><i>{{index+1}}</i> {{item.name}}</el-link>
        </div>
  </el-card>
</template>

<script>
export default {
    name: 'CardArticle',
    props: {
      cardHeader: {
        type: String,
        required: true
      },
      icon: {
        type: String,
        required: true
      },
      articles: {
        type: Array,
        required: true
      },
      itemStyle: Object
    },
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    methods:{
        view(id) {
            this.$router.push({path: `/view/${id}`})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.el-card
    i
        font-size 14px
        color #437dff
        font-weight bold
        padding 0 5px 0 0
        &.icon-hot
            color #e13455
    span
        font-weight bold
    .item
        font-size 14px
        .el-link   
            display block
            line-height 2.5
.el-card .item .el-link >>> .el-link--inner
  clear both
  display -webkit-box
  overflow hidden
  text-overflow ellipsis
  -webkit-box-orient vertical
  -webkit-line-clamp 1
</style>
